<template>
    <div id="background">
        <el-container>
            <el-header id="weiPeiHead">
                <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                    <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back" />
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol">
                        <span class="titleSize">委培报名</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-main id="weiPeiMain">
                <el-row class="weiPeiRow">
                    <el-col style="width:30%;height:100%; display:flex;align-items:center;">
                        <span style="font-size:15px;">委培名称</span>
                    </el-col>
                    <el-col style="width:70%;height:100%; display:flex;align-items:center;" >
                        <span style="font-size:14px;">{{consignName}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="wpline"></div>
                    </el-col>
                </el-row>
                <el-row class="weiPeiRow">
                    <el-col style="width:30%;height:100%; display:flex;align-items:center;" >
                        <span style="font-size:15px;">培训机构</span>
                    </el-col>
                    <el-col style="width:70%;height:100%; display:flex;align-items:center;" >
                        <span style="font-size:14px;">{{trainOrganName}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="wpline"></div>
                    </el-col>
                </el-row>
                <el-row class="weiPeiRow">
                    <el-col style="width:30%;height:100%; display:flex;align-items:center;">
                        <span style="font-size:15px;">报名要求</span>
                    </el-col>
                    <el-col style="width:60%; display:flex;align-items:center;" >
                        <el-row v-for="value in weiPeiYaoQiu" :key="value">
                        <span style="font-size:14px;">{{value}}</span>
                        </el-row>
                    </el-col>
                    <el-col style="width:10%;height:100%; display:flex;align-items:center;" class="end">
                        <span style="font-size:14px;margin-left:10px;" ><i class="el-icon-arrow-right"></i></span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="wpline"></div>
                    </el-col>
                </el-row>
                <el-row class="weiPeiRow">
                    <el-col style="width:30%;height:100%; display:flex;align-items:center;">
                        <span style="font-size:15px;">培训地点</span>
                    </el-col>
                    <el-col style="width:70%;height:100%; display:flex;align-items:center;" >
                        <span style="font-size:14px;">{{weiPeiDiDian}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="wpline"></div>
                    </el-col>
                </el-row>
                <el-row class="weiPeiRow">
                    <el-col style="width:30%;height:100%; display:flex;align-items:center;" >
                        <span style="font-size:15px;">培训时间</span>
                    </el-col>
                    <el-col style="width:70%;height:100%; display:flex;align-items:center;" >
                        <span style="font-size:14px;">{{weiPeiShiJian}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="wpline2"></div>
                    </el-col>
                </el-row>
                <el-row class="weiPeiRow">
                    <el-col style="width:30%;height:100%; display:flex;align-items:center;">
                        <span style="font-size:15px;">姓名</span>
                    </el-col>
                    <el-col style="width:70%;height:100%; display:flex;align-items:center;">
                        <!-- <el-input v-model="name" placeholder="必填" class="tianXieNeiRong"></el-input> -->
                        <span style="font-size:14px;">{{weiPeiXingMing}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="wpline"></div>
                    </el-col>
                </el-row>
                <el-row class="weiPeiRow">
                    <el-col style="width:30%;height:100%; display:flex;align-items:center;">
                        <span style="font-size:15px;">身份证号码</span>
                    </el-col>
                    <el-col style="width:70%;height:100%; display:flex;align-items:center;">
                        <!-- <el-input v-model="sfzhm" placeholder="必填" class="tianXieNeiRong"></el-input> -->
                        <span style="font-size:14px;">{{weiPeiShenFengZheng}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="wpline"></div>
                    </el-col>
                </el-row>
                <el-row class="weiPeiRow">
                    <el-col style="width:30%;height:100%; display:flex;align-items:center;">
                        <span style="font-size:15px;">联系方式</span>
                    </el-col>
                    <el-col style="width:70%;height:100%; display:flex;align-items:center;">
                        <!-- <el-input v-model="lxfs" placeholder="必填" class="tianXieNeiRong"></el-input> -->
                        <span style="font-size:14px;">{{weiPeiLianXiFangShi}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="wpline"></div>
                    </el-col>
                </el-row>
            </el-main>
            <!-- <el-footer id="weiPeiFoot">
                <el-row type="flex" class="tj"> 
                    <button class="tjbtn"><p class="btnWords">提交</p></button>
                </el-row>
            </el-footer> -->
        </el-container>
        <div style="backgroundColor:#ffffff">
                <el-row type="flex" class="imgCol" style="position:fixed;bottom:10px;width:100%"> 
                    <button class="tjbtn" @click="baoMing"><p class="btnWords">提交</p></button>
                </el-row>
        </div>
    </div>    
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
import backIcon from '../../assets/img/mine/back.png'
import { Toast } from 'vant';
export default {
     data(){
        return{
            weiPeiXingMing:'',
            weiPeiShenFengZheng:'',
            weiPeiLianXiFangShi:'',
            trainOrganName:'',
            consignName:'',
            consignId:'',
            lxfs:'',
            sfzhm:'',
            name:'',
            weiPeiShiJian:'',
            weiPeiDiDian:'',
            weiPeiYaoQiu:[],
            backIcon:backIcon,
            normalHeight:document.documentElement.clientHeight,
        }
    },
    mounted(){
        var id=this.$route.query.consignId;
        this.consignId=id;
        
        var bg = document.getElementById("background");
        console.log("height:"+this.normalHeight);
        bg.style.height = this.normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("weiPeiHead");
        var headHeight=this.normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        var main=document.getElementById("weiPeiMain");
        var mainHeight=this.normalHeight/30 *23 ;
        main.style.height=mainHeight+"px";

        // var foot=document.getElementById("weiPeiFoot");
        // var footHeight=this.normalHeight/30 *3 ;
        // foot.style.height=footHeight+"px";

        this.getBaoMingXinXi();
        this.getBaoMingShiJian();
        this.getShenFengXinXi();
    },
    methods:{
        baoMing(){
            var URL=this.IP.IP+'/consign/applyConsign';
            console.log('报名ID'+this.consignId);
            this.$ajax({
                    method:'post',
                    url:URL,
                    params: {
                        consignId:this.consignId,
                    },
                }).then(response =>{
                    if(response.data.data!=null){
                        Toast('报名成功');
                    }else{
                        Toast(response.data.msg);
                    }
                    console.log('提示信息'+response.data.msg);
                }).catch(error => {
                console.log('报名失败');
                });
        },
        getShenFengXinXi(){
            var URL=this.IP.IP+'/user/enrollInfo';
            this.$ajax({
                    method:'get',
                    url:URL,
                }).then(response =>{
                this.weiPeiXingMing=response.data.data.realname;
                this.weiPeiShenFengZheng=response.data.data.id;
                this.weiPeiLianXiFangShi=response.data.data.contact;
                // console.log(response);
                }).catch(error => {
                console.log('获取身份信息失败');
                });
        },
        getBaoMingShiJian(){
            var URL=this.IP.IP+'/consign/getConsignTimeAndLocation';
            this.$ajax({
                    method:'get',
                    url:URL,
                    params: {
                        consignId:this.consignId,
                    },
                }).then(response =>{
                this.weiPeiShiJian=response.data.data.consignTime;
                this.weiPeiDiDian=response.data.data.consignLocation;
                // console.log(response);
                }).catch(error => {
                console.log('获取报名时间失败');
                });
        },
        getBaoMingXinXi(){
            var URL=this.IP.IP+'/consign/getConsignApplyInformation';
            this.$ajax({
                    method:'get',
                    url:URL,
                    params: {
                        consignId:this.consignId,
                    },
                }).then(response =>{
                this.consignName=response.data.data.consignName;
                this.trainOrganName=response.data.data.trainOrganName;
                if(response.data.data.consignRequest[0]==null){
                    this.weiPeiYaoQiu[0]='无要求';
                }else{
                    this.weiPeiYaoQiu=response.data.data.consignRequest;
                }
                console.log('这里'+this.weiPeiYaoQiu);
                // console.log(response);
                }).catch(error => {
                console.log('获取报名信息失败');
                });
        },
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
    }
}
</script>

<style>
.end{
    display: flex;
    justify-content: flex-end;
}
.btnWords{
    font-size: 16px;
    color: #ffffff;
}
.tjbtn{
    line-height: 0.65em;
    width: 80%;
    background-color: #53cdf5;
    border-style: none;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.tianXieNeiRong .el-input__inner {
    /* font-size: 1em; */
    /* width:90%; */
    border: none;
    border-color: #F0F0F0;
    background-color: rgba(255, 255, 255, 0);
    color: #707070;
    border-radius: 0px;
    padding: 0;

}
.wpline2{
    width: 100%;
    height: 10px;
    background-color: #F0F0F0;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.wpline{
    width: 90%;
    height: 2px;
    background-color: #F0F0F0;
}
.weiPeiRow{
    color: #707070;
    height:10%;
    padding-left:15px;
    padding-right: 15px;
    padding-top:5px;
    padding-bottom: 5px;
}
#weiPeiMain{
    padding:0;
}
#weiPeiHead {
  background-color: #53cdf5;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-height: 600px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>